<template>
  <div>
    <el-form  ref="addForm">
<!--     node-key="id" 绑定菜单中的哪个值进行展示 :default-expand-all="true"-->
      <el-tree
        :data="menuRoleData"
        show-checkbox
        node-key="id"
        ref="roleTree"
        :check-strictly="true"
        :default-checked-keys = "this.menuIds"
        :default-expand-all	="true"
        :props="defaultProps">
      </el-tree>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitAssignRole(true)">确 定</el-button>
      <el-button @click="submitAssignRole(false)">取 消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "AssignRole",
  props : {
    roleId : String,
    menuIds : Array
  },
  data() {
    return {
      roleForm : {},
      menuRoleData: [],
      //节点默认展示的内容
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      roleTree:[]
    }
  },
  created() {
    this.load();
  },

  methods : {
    submitAssignRole(flag) {
      if (flag == false) {
        this.$emit('closeAssignRole', 0);
        return;
      }
      //非全选的时候也可以获取到父节点的id, 但是还是有bug
      let menuIds = this.$refs.roleTree.getCheckedKeys().concat(this.$refs.roleTree.getHalfCheckedKeys())
        //this.$refs.roleTree.getCheckedKeys().concat(this.$refs.roleTree.getHalfCheckedKeys())
      //不全选的状况下该行代码无法自动获取到父节点的id
      //   this.$refs.roleTree.getCheckedKeys()
      console.log(menuIds)
      this.axios.post('/sys/role/assignMenu/' + this.roleId, menuIds).then(resp => {
        this.$emit('closeAssignRole', resp.code)
      })
    },
    //加载默认选中的菜单

    load() {
      //加载所有菜单选项
      this.axios.get('/sys/menu/list').then(resp => {
        this.menuRoleData = resp.data;
      })
    },
  },
}
</script>

<style scoped>

</style>
